<template>
  <div class="list-head-nav">
    <div class="nav-drops df-a">
      <div class="drop-item" :class="{'is-drop': item.show}" v-for="(item, index) in options" :key="index">
        <div @click="showDrop(index)">
          <span>{{!item.pick ? item.title : item.pick}}</span>
          <i class="iconfont icon-xiala"></i>
        </div>
        <div class="drop-item_inner">
          <ul class="inner-list">
            <li
              :class="{'is-active': item.pick === sub}"
              v-for="sub in item.list" :key="sub"
              @click="handleSelect(index, sub)">{{sub}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sort-type df-c" @click="changeType">
      <i class="icon-sort" :class="{'db-sort' : doubleSort}"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SortBar',
  data () {
    return {
    }
  },
  props: {
    options: Array,
    doubleSort: Boolean
  },
  methods: {
    changeType () {
      this.$emit('change')
    },
    showDrop (index) {
      this.options[index].show = !this.options[index].show
    },
    handleSelect (index, pick) {
      if (pick === '不限') {
        pick = ''
      }
      this.options[index].pick = pick
      this.options[index].show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list-head-nav {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 1.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: solid 1px #bfbfbf;
  border-bottom: solid 1px #bfbfbf;
  .nav-drops {
    flex: 1;
    padding-left: .3rem;
    padding-right: .1rem;
    .drop-item {
      flex: 1;
      height: 100%;
      line-height: 1.173333rem;
      text-align: center;
      font-size: .4rem;
      color: #101d37;
      position: relative;
      i {
        position: absolute;
        right: .1rem;
        font-size: .346667rem;
        color: #babbba;
      }
      .drop-item_inner {
        position: absolute;
        top: 1.2rem;
        left: 0;
        width: 100%;
        display: none;
        .inner-list {
          background-color: #ffffff;
          box-shadow: 0px 0px 4px 0px rgba(219, 210, 188, 0.4);
          li{
            width: 100%;
            text-align: center;
            line-height: .853333rem;
            font-size: .373333rem;
            background-color: #ffffff;
            &.is-active {
              background-color: #e6f7ff;
            }
          }
        }
      }
      &.is-drop {
        .drop-item_inner {
          display: block;
        }
      }
    }
  }
  .sort-type {
    width: 1.333333rem;
    .icon-sort {
      display: block;
      width: .44rem;
      height: .44rem;
      background: url('../assets/home_sprites.png') no-repeat;
      background-position: -.133333rem -.133333rem;
      background-size: 1.853333rem 1.333333rem;
      &.db-sort {
        background-position: -.84rem -.133333rem;
      }
    }
  }
}
</style>
